<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form class="form" ref="form"  :model="form" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="医院名称" prop="hospitalId">
            <el-select filterable v-model="form.hospitalId" placeholder="请选择">
              <el-option
                v-for="item in officeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医生姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否大V">
            <el-select v-model="form.isV">
              <el-option
                v-for="item in isVOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="positionId">
            <el-select v-model="form.positionId" placeholder="请选择">
              <el-option
                v-for="item in loanOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历职称" prop="tagIDList">
            <el-select
              v-model="form.tagIDList"
              multiple
              filterable
              :multiple-limit="2"
              allow-create
              default-first-option
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="擅长项目" prop="labelIDList">
            <el-select
              v-model="form.labelIDList"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择"
            >
              <el-option
                v-for="item in labelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="简介" prop="descript">
            <el-input v-model="form.descript"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评星" prop="star">
            <el-rate :texts="starTxt" style="margin-top:8px" v-model="form.star" show-text></el-rate>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生照片" prop="image">
            <newUpload ref="uploadImg" :fileNum="fileNum" :width="imgWeith" :height="imgHeight" />
            <p>图片尺寸800px*800px</p>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="医生资格证">
            <newUpload ref="uploadImg3" :fileNum="1" :width="800" :height="600" />
            <p>最多添加1张图片，图片尺寸800px*600px</p>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="医生执业证">
            <newUpload ref="uploadImg4" :fileNum="1" :width="800" :height="600" />
            <p>最多添加1张图片，图片尺寸800px*600px</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主诊医生资格证">
            <newUpload ref="uploadImg5" :fileNum="1" :width="320" :height="166" />
            <p>最多添加1张图片，图片尺寸320px*166px</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资质编号" prop="qualificationsNumber">
            <el-input v-model="form.qualificationsNumber" maxlength="30" placeholder="资质编号不能超过30字符"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详情" prop="content">
            <Tinymce v-model="form.content" style="width:96%"></Tinymce>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="submitFn('form')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import uploadImg from "@/components/UploadImg/index";
import Tinymce from "@/components/Tinymce";
import { hospitalAdd } from "@/api/hospitalAdd";
// import { companyList } from '@/api/branchOfficeDropDown'
import { loanDropDown } from "@/api/loanDropDown";
import {
  hospitalDropDown,
  createDoctor,
  getForGoodAtProjectList
} from "@/api/doctorManage";
import { findPositionList } from "@/api/jobTitle";
import { findDoctorTagsList } from "@/api/degreeTitles";

export default {
  name: "doctorAdd",
  data() {
    return {
      imgWeith: 800,
      imgHeight: 800,
      starTxt: ["1星", "2星", "3星", "4星", "5星"],
      fileNum: 1,
      officeOption: [],
      userId: "",
      statusOption: [
        {
          value: "0",
          label: "是"
        },
        {
          value: "1",
          label: "否"
        }
      ],
      isVOption: [
        {
          value: 0,
          label: "否"
        },
        {
          value: 1,
          label: "是"
        }
      ],
      form: {
        hospitalId: "",
        name: "",
        positionId: "",
        tagIDList: [],
        labelIDList: [],
        sort: "",
        descript: "",
        image: "",
        star: 5,
        content: "",
        isV: 0,
        qualificationsNumber: ""
      },
      rules: {
        hospitalId: [
          { required: true, message: "请选择医院名称", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入医院姓名", trigger: "blur" }],
        positionId: [
          { required: true, message: "请选择职位", trigger: "blur" }
        ],
        tagIDList: [
          { required: true, message: "请选择学历职称", trigger: "blur" }
        ],
        labelIDList: [
          { required: true, message: "请选择擅长项目", trigger: "blur" }
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        descript: [{ required: true, message: "请输入简介", trigger: "blur" }],
        image: [{ required: true, message: "请上传图片", trigger: "blur" }],
        star: [{ required: true, message: "请评分", trigger: "blur" }],
        content: [{ required: true, message: "请编辑详情", trigger: "blur" }],
        qualificationsNumber: [
          { required: true, message: "请编辑资质编号", trigger: "blur" }
        ]
      },
      options: [],
      loanOption: [],
      selectedOptions: [],
      list1: {},
      submitForm: {},
      labelOptions: []
    };
  },
  inject: ["reload"],
  components: { uploadImg, Tinymce, newUpload },
  mounted() {
    this.userId = this.$route.query.userId;
    //分公司列表
    this.getCompanyList();
  },
  methods: {
    //获取分公司列表
    getCompanyList() {
      let datas = {
        pageNum: "0",
        pageSize: "10000"
      };
      findDoctorTagsList(datas)
        .then(res => {
          // console.log(res)
          let resData = res.data.data.list;
          let newData = [];
          resData.forEach(e => {
            newData.push({
              value: e.id + "",
              label: e.name + ""
            });
          });
          this.options = newData;
          console.log(newData);
        })
        .catch(error => {
          this.$message.error(error);
        });
      findPositionList(datas).then(res => {
        // console.log(res)
        let resData = res.data.data.list;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        this.loanOption = newData;
      }),
        // 医院列表
        hospitalDropDown().then(res => {
          let resData = res.data.data;
          let newData = [];
          resData.forEach(e => {
            newData.push({
              value: e.id + "",
              label: e.name
            });
          });
          this.officeOption = newData;
        });
      //医生擅长项目
      getForGoodAtProjectList().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name + ""
          });
        });
        this.labelOptions = newData;
      });
    },
    // 修改提交
    submitFn(e) {
      this.form.image = this.$refs.uploadImg.submitUpload()[0];
      this.form.qualificationList = this.$refs.uploadImg3.submitUpload();
      this.form.licenceList = this.$refs.uploadImg4.submitUpload();
      this.form.mainQualificationList = this.$refs.uploadImg5.submitUpload();
      console.log(this.form);
      this.$refs[e].validate(valid => {
        if (valid) {
          let datas = { ...this.form };
          // this定义
          // let tf = datas;
          // for (var n in tf) {
          //   if (tf.hasOwnProperty(n)) {
          //     if (tf[n].length) {
          //       continue;
          //     }
          //     if (tf[n] !== undefined) {
          //       tf[n] += "";
          //     }
          //   }
          // }
          if (datas.tagIDList.length > 0) {
            datas.tagIDList = datas.tagIDList.map(String);
          }
          if (datas.labelIDList.length > 0) {
            datas.labelIDList = datas.labelIDList.map(String);
          } else {
            datas.labelIDList = [];
          }
          datas.isV = datas.isV - 0;
          console.log(datas);
          createDoctor(datas)
            .then(res => {
              console.log(res);
              if (res.data.code == 0) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success"
                });
                this.$router.push("/doctorIndex");
                this.reload();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
</style>